<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>headNav</title>
		<style type="text/css">
	*{
	  margin:0 auto;
	  padding:0;
  }
   #headNav{
	  width:100%;
	  height:50px;
	  background-color:rgba(0,0,0,0.15);
  }
   p{
	  width:200px; 
	  height:50px; 
	  float:left;
	  margin-left:80px;}/*lodo*/
	  
	#main {
		position: relative;
		list-style: none;
		font-size: 0;
		text-transform: uppercase;
		display: inline-block;
		margin: 0 auto;
		float: right;
	  
	}
	
	#main li {
		font-size: 1.0rem; /*字体大小*/
		font-weight: 600;
		display: inline-block;
		position: relative;
		padding: 14px 15px; /*内边距*/
		cursor: pointer;/*指针样式*/
		z-index: 5;
		min-width:100px;
	}
	
	li {
		margin: 0;
		
	}
	/*鼠标悬停/活动链接*/
	#main a{color: #fff;text-decoration: none;}
	#main a:hover{color:#ff8c00;}
	#main a:active{color:#FF6600 ;}
	#main li a span{font-size:1.1em;font-weight: 600;}
	#main li a span:hover{color: #FF6600;}
	#main li a span:active{color: #ff8c00;}
	#marker {
		height: 9px;/*滚动线高度*/
		background: rgba(255,140,0,0.75)!important;
		position: absolute;
		bottom: 3px;
		width: 90px;
		z-index: 2;
		-webkit-transition: all 0.35s;
		transition: all 0.35s;
		border-radius: 4px;
	}
	
	
	*,
	*:after,
	*:before {
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	
	#main li:nth-child(1):hover ul div {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}
	
	#main li:nth-child(1):hover~#marker {
		-webkit-transform: translate(0px, 0);
		transform: translate(0px, 0);
	}
	
	#main li:nth-child(2):hover ul div {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}
	
	#main li:nth-child(2):hover~#marker {
		-webkit-transform: translate(110px, 0);
		transform: translate(110px, 0);
	}
	
	#main li:nth-child(3):hover ul div {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}
	
	#main li:nth-child(3):hover~#marker {
		-webkit-transform: translate(210px, 0);
		transform: translate(210px, 0);
	}
	
	#main li:nth-child(4):hover ul div {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}
	
	#main li:nth-child(4):hover~#marker {
		-webkit-transform: translate(310px, 0);
		transform: translate(310px, 0);
	}
	
	#main li:nth-child(5):hover ul div {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}
	
	#main li:nth-child(5):hover~#marker {
		-webkit-transform: translate(410px, 0);
		transform: translate(410px, 0);
	}

	#main li:nth-child(6):hover ul div {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}
	
	#main li:nth-child(6):hover~#marker {
		-webkit-transform: translate(510px, 0);
		transform: translate(510px, 0);
	}
		
</style>
	</head>
	<body>
		<div id="headNav">
		<p><a></a></p>
	<ul id="main">
		<li><a href="#" target="_parent"><span>首&nbsp;页</span></a></li>
		<li><a href="#" target="_blank">景点明细</a></li>
		<li><a href="#" target="_parent">旅游攻略</a></li>
		<li><a href="#" target="_parent">关于张家界</a></li>
		<li><a href="#" target="_parent">联系我们</a></li>
		<li><a href="#" target="_parent">欢迎加盟</a></li>
		<div id="marker"></div>
	</ul>
    
	</div>
	</body>
</html>
